import { Button, Descriptions } from 'antd';
import { useState } from 'react';
import { useCustomerState } from '../../stores/CustomerStore';
import EditCustomerInfoModal from './EditCustomerInfoModal';

function CustomerInfo() {
  const { customer } = useCustomerState();
  const [isModalOpen, setIsModalOpen] = useState(false);

  if (!customer) {
    return <div>加载中……</div>;
  }

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <Descriptions title="客户信息" bordered>
        <Descriptions.Item label="客户 ID">
          {customer.customerID}
        </Descriptions.Item>
        <Descriptions.Item label="姓名">
          {customer.customerName}
        </Descriptions.Item>
        <Descriptions.Item label="身份证号">{customer.PID}</Descriptions.Item>
        <Descriptions.Item label="电话号码">
          {customer.telephone}
        </Descriptions.Item>
        <Descriptions.Item label="地址">{customer.address}</Descriptions.Item>
      </Descriptions>
      <Button type="primary" onClick={showModal} style={{ marginTop: 16 }}>
        编辑信息
      </Button>
      <EditCustomerInfoModal isOpen={isModalOpen} onCancel={handleCancel} />
    </div>
  );
}

export default CustomerInfo;
